<template>
	<div>
    <el-divider>
      <el-icon>属性配置</el-icon>
    </el-divider>
    <zh-form label-position="top" :model="_value" :span="24">
      <zh-form-select  prop="listType" label="文件列表类型" v-model="_value.listType"
      :options="[
				{ dictKey: 'text', dictValue: 'text'},
				{ dictKey: 'picture', dictValue: 'picture'},
				{ dictKey: 'picture-card', dictValue: 'picture-card'}
			]"></zh-form-select>
      <zh-form-switch  prop="required" label="是否必填" v-model="_value.required"> </zh-form-switch>
      <zh-form-switch  prop="autoUpload" label="是否自动上传" v-model="_value.autoUpload"> </zh-form-switch>
      <zh-form-switch  prop="multiple" label="是否支持多选文件" v-model="_value.multiple"> </zh-form-switch>
      <zh-form-switch  prop="drag" label="是否启用拖拽上传" v-model="_value.drag"> </zh-form-switch>
       <zh-form-switch prop="disabled" label="是否禁用" v-model="_value.disabled"> </zh-form-switch>
      <zh-form-switch  prop="showFileList" label="是否显示已上传文件列表" v-model="_value.showFileList"> </zh-form-switch>
      <zh-form-input prop="action" label="请求 URL(为空默认上传到本地文件服务器)" v-model="_value.action"></zh-form-input>
      <zh-form-number  prop="limit" label="允许上传文件的最大数量" v-model="_value.limit"></zh-form-number>
    </zh-form>
  </div>
</template>
<script lang="ts" setup name="UploadSetting">
const emits = defineEmits(['update:modelValue']);
//------------------接收传入参数(组件)-------------------
const props = defineProps({
	modelValue: Object,
});
//------------------定义子组件---------------------------

//------------------内部变量定义-------------------------
let _value = ref(Object.assign({fcDragTag:'input'},props.modelValue || {listType:"picture",autoUpload:true,multiple:false,drag:false,showFileList:true}));
//------------------定义调用方法-------------------------

//------------------初始化------------------------------
onMounted(() => {});
//------------设置给父组件调用的数据/方法(组件)-----------
watch(
	() => props.modelValue,
	(val) => {
		_value.value = Object.assign({fcDragTag:'input'},val || {listType:"picture",autoUpload:true,multiple:false,drag:false,showFileList:true});
	},
	{
		deep: true,
	}
);
watch(
	() => _value.value,
	(val) => {
		console.log(val);
		emits('update:modelValue', val);
	},
	{
		deep: true,
	}
);

</script>
<style lang="scss" scoped></style>